<template>
  <div class="newshop">
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="card_title">
        新店申请
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
        <a-radio-group v-model="status" style="margin-bottom:5px;" @change="statusChange">
          <a-radio-button :value="4">
            全部
          </a-radio-button>
          <a-radio-button :value="1">
            待审核
          </a-radio-button>
          <a-radio-button :value="3">
            被拒绝
          </a-radio-button>
          <a-radio-button :value="2">
            已通过
          </a-radio-button>
        </a-radio-group>
        <div>
          <a-input-search
            placeholder="商品ID / 店铺名"
            style="width: 200px;margin-right:10px;margin-bottom:5px;"
            v-model="search"
            allowClear
            @search="onSearch"
          />
          <a-button type="primary" icon="plus" @click="drawershow = true" class="br4">
            新店申请
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="goods_url" slot-scope="text,row">
          <div class="line-3" style="width:288px;">{{ row.goods_url }}</div>
        </div>
        <div slot="week_service_price" slot-scope="text,row">
          <div>{{ row.week_service_price | numFormat }}</div>
        </div>
        <div slot="order_type" slot-scope="text,row">
          <div>{{ row.order_type ===1? '正常单':'礼金单' }}</div>
        </div>
        <div slot="status" slot-scope="text,row">
          <div :style="{color: row.status ===1? '#101010':row.status ===2? '#39C15B':'#FF0303'}">{{ row.status ===1?
            '待审批':row.status ===2? '已通过':'被拒绝' }}
          </div>
        </div>
        <div slot="active" slot-scope="row">
          <div>
            <a-button type="link" @click="dolook(row.fd_img)">查看截图</a-button>
          </div>
          <a-button type="link" @click="doedit(row)">修改信息</a-button>
        </div>
      </a-table>
    </a-card>
    <a-drawer
      title="新店申请"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">报销店铺</div>
        <a-input v-model="form.shop_name" placeholder="填写店铺名称，尽可能填写一个" class="chooseipt br4"/>
        <div class="titles">商品链接</div>
        <a-textarea v-model="form.goods_url" :rows="4" placeholder="填写产品链接，一行一个" class="chooseipt br4" allowClear>
        </a-textarea>
        <div class="titles">预估周服务费</div>
        <a-input v-model.number="form.week_service_price" placeholder="预估周服务费" suffix="元" class="chooseipt br4"/>
        <div class="titles">详情描述</div>
        <a-input v-model="form.detail_remark" placeholder="填写详情描述" class="chooseipt br4"/>
        <div class="titles">返点比例</div>
        <a-input v-model.number="form.fd_proportion" placeholder="填写返点比例" class="chooseipt br4"/>
        <div class="titles">备注</div>
        <a-input v-model="form.remark" placeholder="审核可以看到的备注" class="chooseipt"/>
        <div class="flex row_bet">
          <div>
            <div class="titles">返点类型</div>
            <a-radio-group v-model="form.type" class="chooseipt">
              <a-radio value="税前" style="margin-right: 63px;">
                税前
              </a-radio>
              <a-radio value="税后">
                税后
              </a-radio>
            </a-radio-group>
          </div>
          <div>
            <div class="titles">订单类型</div>
            <a-radio-group v-model="form.order_type" class="chooseipt">
              <a-radio :value="1" style="margin-right: 63px;">
                正常单
              </a-radio>
              <a-radio :value="2">
                礼单金
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="titles">截图证明文件</div>
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://app.letuilm.com/api/upload"
          @change="handleChange2"
          style="width: 460px;"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox"/>
          </p>
          <p class="ant-upload-text">
            点击或将文件拖拽到这里上传
          </p>
          <p class="ant-upload-hint">
            支持扩展名：.rar .zip .doc .docx .pdf .jpg...
          </p>
        </a-upload-dragger>

        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            :disabled="btnloading"
            style="float:left;"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'提交中...':'提 交 申 请' }}
          </a-button>
        </div>
      </div>
    </a-drawer>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>

<script>
  import { doaddshopapply, getnewshoplist, updateshopapplyinfo } from '@/api/financeApi'
  import moment from 'moment'

  export default {
    name: 'Newshop',
    data () {
      return {
        moment,
        drawershow: false,
        previewVisible: false,
        previewImage: '',
        status: 4,
        search: '',
        form: {
          fd_img: '',
          goods_url: '',
          shop_name: '',
          week_service_price: '',
          detail_remark: '',
          fd_proportion: '',
          type: '税前',
          order_type: 1,
          remark: ''
        },
        columns: [
          {
            title: '店铺名称',
            align: 'left',
            dataIndex: 'shop_name',
            scopedSlots: {
              customRender: 'shop_name'
            }
          },
          {
            title: '产品链接',
            align: 'center',
            dataIndex: 'goods_url',
            scopedSlots: {
              customRender: 'goods_url'
            }
          },
          {
            title: '预计周服务费',
            align: 'center',
            dataIndex: 'week_service_price',
            scopedSlots: {
              customRender: 'week_service_price'
            }
          },
          {
            title: '详情描述',
            align: 'center',
            // width: 500,
            dataIndex: 'detail_remark',
            scopedSlots: {
              customRender: 'detail_remark'
            }
          },
          {
            title: '返点比例',
            align: 'center',
            dataIndex: 'fd_proportion',
            scopedSlots: {
              customRender: 'fd_proportion'
            }
          },
          {
            title: '税前税后',
            align: 'center',
            dataIndex: 'type',
            scopedSlots: {
              customRender: 'type'
            }
          },
          {
            title: '单类型',
            align: 'center',
            dataIndex: 'order_type',
            scopedSlots: {
              customRender: 'order_type'
            }
          },
          {
            title: '审批状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '审核备注',
            align: 'center',
            dataIndex: 's3',
            scopedSlots: {
              customRender: 's3'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          {
            id: 1, // 自增id
            fd_img: '//img.alicdn.com/bao/uploaded/i1/3441584758/O1CN01HwD1TZ1l1D3N29WBd_!!0-item_pic.jpg', // 返点截图证明url
            goods_url: 'https://konkahyjc.tmall.com/?spm=a220o.1000855.w5001-22232253196.8.37f14861nRchDx&scene=taobao_shop', // 商品地址
            week_service_price: '200.00', // 预计周服务费数值
            detail_remark: '详情陈述备注', // 详情陈述备注
            fd_proportion: '0.50', // 返点比例
            type: '税前', // 税前税后
            order_type: 1, // 订单类型（1正常单/2礼金单）
            create_at: null, // 创建时间
            update_at: '2020-10-15 14:36:23', // 修改时间
            status: 2, // 审核状态（1待审核/2通过/3驳回）
            remark: 'remark', // 审核备注
            user: '从雪艳', // 用户
            shop_name: '绿橡树旗舰店'// 店铺

          }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        value: '',
        btnloading: false
      }
    },

    computed: {},
    created () {
      this.getnewshoplist(1, 15, 4)
    },
    mounted () {
    },
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    methods: {
      dolook (img) {
        this.previewImage = img
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      onClose () {
        this.form = {}
        this.drawershow = false
      },
      doedit (row) {
        console.log(row)
        this.form = row
        this.drawershow = true
      },
      goaudit (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/activity/newShop/myAudit'
        })
      },
      handleChange2 (info) {
        const type = info.file.type
        if (type !== 'uploading') {
          console.log(info.file, info.fileList)
          if (info.file.response) {
            this.form.fd_img = '//' + info.file.response.data.url
          }
        }
        if (type === 'done') {
          this.$message.success(`${info.file.name} 上传成功!`)
        } else if (type === 'error') {
          this.$message.error(`${info.file.name} 上传失败!`)
        }
      },
      dosubmit () {
        this.btnloading = true
        console.log(this.form)
        if (!this.form.id) {
          if (
            this.form.fd_img !== '' &&
            this.form.goods_url !== '' &&
            this.form.shop_name !== '' &&
            this.form.week_service_price !== '' &&
            this.form.detail_remark !== '' &&
            this.form.fd_proportion !== '' &&
            this.form.type !== '' &&
            this.form.remark !== '' &&
            this.form.order_type !== ''
          ) {
            doaddshopapply(this.form).then(res => {
              // console.log(res)
              if (res.code === 200) {
                this.$message.success('提交成功!')
                this.getnewshoplist(1, 15, 4)
                this.drawershow = false
                this.form = {}
                this.btnloading = false
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            this.$message.info('请检查所需条件!')
          }
        } else {
          updateshopapplyinfo(this.form).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.getnewshoplist(1, 15, 4)
              this.drawershow = false
              this.form = {}
              this.btnloading = false
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      getnewshoplist (page, pagesize, status, search) {
        this.loading = true
        getnewshoplist({
          page: page,
          pagesize: pagesize,
          status: status,
          search: search
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getnewshoplist(params.page, 15, this.status, this.search)
      },
      onSearch (value) {
        console.log(value)
        this.getnewshoplist(1, 15, this.status, this.search)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.getnewshoplist(1, 15, this.status, this.search)
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .newshop {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }
  }
</style>
